<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡类名</title>
    <script src="../../lib/vue.js"></script>
    <style>
        /*时间点*/
        .v-enter,/*元素还未进入时*/
        .v-leave-to{ /*元素已经离开后*/
            opacity: 0;
        }


        .v-enter-active,
        .v-leave-active{
            transition: ease .8s;
        }



        .my-enter,/*元素还未进入时*/
        .my-leave-to{ /*元素已经离开后*/
            opacity: 0;
            transform: translateX(80px);
        }


        .my-enter-active,
        .my-leave-active{
            transition: ease .8s;
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" @click="flag = !flag" value="切换" />
        <!--transition是vue官方提供的-->
        <transition>
            <p v-if="flag">{{ msg }}</p>
        </transition>


        <!--2.自定义vue动画的v-前缀-->
        <hr/>
        <input type="button" @click="flag2 = !flag2" value="切换" />
        <!--定义前缀为my-->
        <transition name="my">
            <p v-if="flag2">{{ msg }}</p>
        </transition>
    </div>

    <script>
        var vue = new Vue({
            el : '#app',
            data:{
                flag:false,
                flag2:false,
                msg:"hello vue"
            },
            methods:{

            }
        })
    </script>
</body>
</html>